<template>
  <div class="content">
    <div class="jftrDiv">
      <TitleVue :name="'经费投入'" />
      <div id="jftrChart" ref="jftrChart"></div>
    </div>
    <div class="yjzdDiv" id="yjzdDiv">
      <TitleVue :name="'应急联动'" />
      <div class="yjzdContent" id="yjzdContent"></div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import * as echarts from 'echarts'
import { Graph } from '@antv/x6'
export default {
  name: 'JzRight',
  components: {
    TitleVue
  },
  data() {
    return {
      myChart: null,
      graph: null,
      firstData: [{ name: '指挥长', role: '南燕竹镇副镇长' }],
      secondData: [
        { name: '副指挥长', role: '水务局局长' },
        { name: '副指挥长', role: '应急管理局局长' },
        { name: '副指挥长', role: '受影响各镇负责人' }
      ],
      thirdData: [
        { name: '参谋部' },
        { name: '后勤部' },
        { name: '抢险组' },
        { name: '气象局' },
        { name: '武装部' },
        { name: '武警部队' },
        { name: '交通局' },
        { name: '供销社' },
        { name: '供电公司' },
        { name: '卫生健康与体育局' },
        { name: '公安局' },
        { name: '疾控中心' },
        { name: '应急局' }
      ]
    }
  },
  mounted() {
    this.renderJftChart()
    this.renderTree()
  },
  methods: {
    renderTree() {
      var graphDatas = []
      var x = 0
      var y = 0
      this.firstData.forEach((item, index) => {
        graphDatas.push({
          id: 1,
          shape: 'itemRect',
          width: 110,
          height: 50,
          position: {
            x: x - 60,
            y: y - 10
          },
          attrs: {
            '.name': {
              text: item.name
            },
            '.role': {
              text: item.role
            }
          }
        })
      })
      this.secondData.forEach((item, index) => {
        item = this.getPosition(y, index, item, 'secondData')
      })
      var centerIndex = null
      var secondIndexList = []
      this.secondData.forEach((item, index) => {
        graphDatas.push({
          id: 100 + index * 10,
          shape: 'itemRect',
          width: 110,
          height: 50,
          position: {
            x: x + 110,
            y: item.indexY - 10
          },
          attrs: {
            '.name': {
              text: item.name
            },
            '.role': {
              text: item.role
            }
          }
        })
        secondIndexList.push(100 + index * 10)
        if (index == 1) {
          centerIndex = 100 + index * 10
        }

        graphDatas.push({
          id: 1000 + index * 10,
          shape: 'connectLine',
          source: 1,
          target: 100 + index * 10,
          vertices: [
            { x: x + 80, y: y },
            { x: x + 80, y: item.indexY + 15 }
          ]
        })
      })

      // graphDatas.push({
      //   id: 100000000001,
      //   shape: 'connectLine',
      //   source: secondIndexList[1],
      //   target: secondIndexList[0]
      // })
      // graphDatas.push({
      //   id: 100000000002,
      //   shape: 'connectLine',
      //   source: secondIndexList[1],
      //   target: secondIndexList[2]
      // })
      this.thirdData.forEach((item, index) => {
        item = this.getPosition(y, index, item, 'thirdData')
      })
      this.thirdData.forEach((item, index) => {
        graphDatas.push({
          id: 10000 + index * 10,
          shape: 'itemRect2',
          width: 100,
          height: 30,
          position: {
            x: x + 290,
            y: item.indexY
          },
          label: item.name
        })
        graphDatas.push({
          id: 100000 + index * 10,
          shape: 'connectLine',
          source: centerIndex,
          target: 10000 + index * 10,
          vertices: [
            { x: x + 265, y: y },
            { x: x + 265, y: item.indexY + 15 }
          ]
        })
      })

      this.graphDatas = graphDatas

      // const male = require('@/assets/img/common/treeBg.png')
      Graph.registerNode(
        'itemRect',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              attrs: {
                class: 'card'
              }
            },
            {
              tagName: 'text',
              attrs: {
                class: 'name'
              }
            },
            {
              tagName: 'text',
              attrs: {
                class: 'role'
              }
            }
          ],
          attrs: {
            '.card': {
              rx: 15,
              ry: 15,
              refWidth: '100%',
              refHeight: '100%',
              stroke: '#8693DB',
              fill: '#194581',
              strokeWidth: 1
            },
            '.name': {
              refY: 0.3,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei',
              fontSize: 16,
              textAnchor: 'middle',
              textVerticalAnchor: 'middle'
            },
            '.role': {
              refY: 0.7,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei',
              fontSize: 16,
              textAnchor: 'middle',
              textVerticalAnchor: 'middle'
            }
          }
        },
        true
      )

      Graph.registerNode(
        'itemRect2',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            body: {
              rx: 15,
              ry: 15,
              stroke: '#8693DB',
              fill: '#194581',
              strokeWidth: 1
            },
            label: {
              fontSize: 16,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei'
            }
          }
        },
        true
      )

      Graph.registerEdge(
        'connectLine',
        {
          inherit: 'edge',
          attrs: {
            line: {
              stroke: '#0C4DF5',
              strokeWidth: 2,
              targetMarker: null
            }
          }
        },
        true
      )

      this.graph = new Graph({
        container: document.getElementById('yjzdContent'),
        width: '100%',
        height: '100%',
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false
        },
        autoResize: true,
        panning: {
          enabled: false
        },
        connecting: {
          router: 'orth',
          sourceAnchor: {
            name: 'right', // 锚点会在节点右侧中心往上偏移 10px
            args: {
              dy: 0
            }
          },
          targetAnchor: {
            name: 'left', // 锚点会在节点右侧中心往上偏移 10px
            args: {
              dy: 0
            }
          },
          connectionPoint: 'anchor'
        },
        interacting: function (cellView) {
          if (cellView.cell) {
            return { nodeMovable: false }
          }
          return true
        }
      })
      const cells = []
      this.graphDatas.forEach((item) => {
        if (item.shape === 'connectLine') {
          cells.push(this.graph.createEdge(item))
        } else {
          cells.push(this.graph.createNode(item))
        }
      })
      this.graph.resetCells(cells)
      this.graph.centerContent()
      // this.graph.render()

      // 使用fitView方法，并尝试通过其他方式调整居中效果
      this.graph.fitView()
      this.graph.zoomToFit({ padding: 10, maxScale: 1 })
    },
    getPosition(y, index, item, datas) {
      if (this[datas].length == 1) {
        item.indexY = y
        return item
      } else {
        if (this[datas].length % 2 == 0) {
          var beforeNum = this[datas].length / 2
          var needDistance = beforeNum * 30 + beforeNum * 10 - 20
          var topY = y - needDistance
          item.indexY = topY + index * 40
          return item
        } else {
          var itemHeight = 30
          if (datas == 'secondData') {
            itemHeight = 100
          }
          var beforeNum = parseInt(this[datas].length / 2)
          var needDistance = beforeNum * itemHeight + beforeNum * 10
          var topY = y - needDistance
          item.indexY = topY + index * (itemHeight + 10)
          return item
        }
      }
    },
    renderJftChart() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(this.$refs.jftrChart)
      const option = {
        grid: {
          top: '6%',
          left: '10%',
          right: '5%',
          bottom: '15%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return params[0].name + '：' + params[0].value + '万元'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff' //设置 字体颜色
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0095FF'
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '万元',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff' //设置 字体颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#8FADCC'
            }
          }
        },
        series: [
          {
            data: [20, 10, 9, 28, 13, 15],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#00E8FF'
            }
          }
        ]
      }
      this.myChart.setOption(option)
      // window.onresize = function () {
      //   this.myChart.resize()
      // }
    }
  }
}
</script> 

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .jftrDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    #jftrChart {
      padding: 0.8vh;
      box-sizing: border-box;
      width: 100%;
      height: 16vh;
    }
  }

  .yjzdDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .yjzdContent {
      flex: 1;
    }
  }
}
</style>
